<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MutationObserver 接口(2)</title>
  </head>
  <body></body>
  <script>
    /** 4. 复用 MutationObserver
     *     a.多次调用 observe()方法，可以复用一个 MutationObserver 对象观察多个不同的目标节点。此时，MutationRecord 的 target 属性可以标识发生变化事件
     *       的目标节点。
     *     b.disconnect()方法是一个“一刀切”的方案，调用它会停止观察所有目标：
     * **/
    function checkMultiplexing() {
      //1.新建两个节点
      let divDOM = document.createElement("div");
      let spanDOM = document.createElement("span");
      //2.将节点添加到文档判断中
      let documentfragment = document.createDocumentFragment();
      documentfragment.append(divDOM, spanDOM);
      //3.将文档片段添加到文档中
      document.body.appendChild(documentfragment);
      //4.添加MutationObserver监听；
      let mutationObserver = new MutationObserver((mutationRecords) => {
        console.log(mutationRecords.map((e) => e.target));
      });
      //观察两个子节点
      mutationObserver.observe(divDOM, { attributes: true });
      mutationObserver.observe(spanDOM, { attributes: true });
      //5.尝试修改子节点属性
      divDOM.id = "zw";
      spanDOM.className = "zw";
      console.log("attributes changed!!");
    }
    //  checkMultiplexing();

    /** 5. 重用 MutationObserver
     *     a.调用 disconnect()并不会结束 MutationObserver 的生命。还可以重新使用这个观察者，再将它关联到新的目标节点。
     * **/
    function checkResuing() {
      let observer = new MutationObserver(() =>console.log("<body> attributes changed"));
      observer.observe(document.body, { attributes: true });
      // 这行代码会触发变化事件
      document.body.setAttribute("foo", "bar");
      setTimeout(() => {
        observer.disconnect();
        // 这行代码不会触发变化事件
        document.body.setAttribute("bar", "baz");
      }, 0);
      setTimeout(() => {
        // Reattach
        observer.observe(document.body, { attributes: true });
        // 这行代码会触发变化事件
        document.body.setAttribute("baz", "qux");
      }, 0);
    }
    checkResuing();
  </script>
</html>
